<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">加入我们</view>
		</view>
		<view class="clear_box"></view>
		
		<view class="bg_box">
			<image class="bg01" src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/bg16.jpg" mode="widthFix"></image>
			<view class="share_content">
				<view class="input_list">
					<view class="icon iconfont icon-gerenzhongxin"></view>
					<view class="line"></view>
					<input type="text" value="" placeholder="请输入姓名" v-model="name" />
				</view>
				<view class="input_list">
					<view class="icon iconfont icon-dianhua1"></view>
					<view class="line"></view>
					<input type="text" value="" placeholder="请输入电话" v-model="phone" />
				</view>
				<view class="input_list">
					<view class="icon iconfont icon-a-ziyuan190"></view>
					<view class="line"></view>
					<input type="text" value="" placeholder="请输入意向小区" v-model="village" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="goJion">加入我们</view>
				</view>

			</view>
		</view>
		
		<!-- <view class="menu_box02">
			<view class="menu">
				<view class="num">244</view>
				<view class="text">共邀请好友</view>
			</view>
			<view class="menu">
				<view class="num">244</view>
				<view class="text">邀请在路上</view>
			</view>
			<view class="menu">
				<view class="num">244</view>
				<view class="text">获得奖励（元）</view>
			</view>
		</view> -->
		
		
		
		

		
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrrol:false,
			info:'',
			info02:'',
			name:'',
			phone:'',
			village:'',
		};
	},
	onShow() {
		let that = this;
		that.loadData();
		that.loadData02();
		
	},
	methods: {
		goJion(){
			let that = this;
			if (!that.name) {
				that.Msg.Fail('请输入姓名');
				return;
			}
			if (!that.phone) {
				that.Msg.Fail('请输入电话');
				return;
			}
			if (!that.village) {
				that.Msg.Fail('请输入意向小区');
				return;
			}
			that.Net._post('terminal/rider_apply', {name:that.name,phone:that.phone,village_id:that.village}, res => {
				if (res.code == 200) {
					//console.log(res.data);
					uni.showToast({
						title: '提交成功，请等待客服联系',
						duration: 2000,
						icon: 'none'
					});
				}
			});
		},
		goShare(){
			let that = this;
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 2,
				imageUrl: this.info.url,
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
	},
	onPageScroll: function(Object) {
		//console.log(Object.scrollTop); //实时获取到滚动的值
		if (Object.scrollTop > 28) {
			this.scrrol = true;
			/* #ifdef APP-PLUS */
			/* #endif */
		} else if (Object.scrollTop < 28) {
			this.scrrol = false;
			/* #ifdef APP-PLUS */
			/* #endif */
		}
	}
	
};
</script>

<style>
	.scrrolHeader {
		background-color: #fef2e6 !important;
	}
	
	page{
		background-color: #ff873b !important;
		padding-bottom: 0 !important;
	}
	.header{
		background-color: #ec4511 !important;
	}
	
	.header .text{
		background-color: #ec4511 !important;
		color: #fff !important;
	}
	
	.header .back{
		color: #fff;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
		display: block;
	}
	
	.bg_box .share_content{
		width: 100%;
		position: absolute;
		left: 0;
		top: 44vh;
		z-index: 97;
	}
	
	.bg_box .share_content .portrait_box{
		width: 100%;
	}
	
	.bg_box .share_content .portrait_box .portrait{
		width: 20vw;
		height: 20vw;
		margin: 50vw auto 0;
	}
	
	.bg_box .share_content .portrait_box .portrait image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.bg_box .share_content .portrait_box .name{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-top: 2vw;
	}
	
	.bg_box .share_content .ewm{
		width: 45vw;
		height: 45vw;
		margin: 6vh auto 0;
	}
	
	.bg_box .share_content .ewm image{
		width: 100%;
		display: block;
	}
	
	.menu_box{
		width: 100%;
		padding: 5vw 0 0;
	}
	
	.menu_box .menu{
		width: 80%;
		height: 15vw;
		margin: 0 auto;
		line-height: 15vw;
		border-radius: 15vw;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
		background-color: #ec4511 ;
	}
	
	.menu_box02{
		width: 86%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 6vw 0;
		border-radius: 3vw;
	}
	
	.menu_box02 .menu{
		flex: 1;
	}
	
	.menu_box02 .menu .num{
		font-size: 5vw;
		color: #E83F4D;
		font-weight: bold;
		text-align: center;
	}
	
	.menu_box02 .menu .text{
		font-size: 3.2vw;
		color: #666666;
		margin-top: 3vw;
		text-align: center
	}
	
	.rule{
		width: 100%;
		margin-top: 2vw;
		font-size: 3.2vw;
		color: #666;
		text-align: center;
	}
	
	.input_list {
		width: 80%;
		height: 13.5vw;
		margin: 0 auto;
		border-radius: 13.5vw;
		display: flex;
		position: relative;
		margin-top: 5vw;
		padding-left: 3vw;
		background-color: #f6f6f6;
	}
	
	.input_list .icon {
		font-size: 6vw;
		color: #333;
		width: 14vw;
		line-height: 13.5vw;
		height: 13.5vw;
		text-align: center;
	}
	
	.input_list .line {
		width: 1px;
		height: 6vw;
		margin-top: 3.75vw;
		background-color: #dedfdf;
	}
	
	.input_list input {
		flex: 1;
		font-size: 14px;
		height: 50px;
		line-height: 50px;
		color: #333;
		margin-left: 4vw;
	}
	
	.input_list .forget {
		width: 20vw;
		text-align: left;
		line-height: 13.5vw;
		font-size: 3.5vw;
		color: #1d1f24;
		margin-left: 2vw;
	}
	
</style>
